import { useLocation, useNavigate } from 'react-router-dom';
import '../index.scss';
import LogoPNG from '@/assets/image/logo.png';
import { Col, Row } from 'antd';
import UserInfo from '../components/UserInfo';

const menuList = [
    {
        text: '刷题',
        path: '/'
    },
    {
        text: '组件库',
        path: '/tdesign-pro-component/'
    },
    {
        text: '微数据',
        path: '/micro-data'
    },
    {
        text: '代码生成',
        path: '/code-generator'
    },
    {
        text: '关于网站',
        path: '/about'
    }
]

const PCHeader: React.FC = () => {

    const { pathname } = useLocation();

    const router = useNavigate();

    return <div className="w-full head-navigotor-pc h-14 bg-white">
        <Row className='w-full'>
            <Col span={3}></Col>
            <Col span={18}>
                <div className='head-navigotor-pc-left flex-col-center justify-between'>
                    <div className='flex-col-center'>
                        <img src={LogoPNG} alt='logo' style={{ height: 40, width: 40 }} />
                        <span className='ml-3 text-xl font-bold'>
                            胖砸 Club
                        </span>

                        <div className='top-menu-list'>
                            {
                                menuList.map(item => <div onClick={() => { router(item.path) }} key={item.path} className={pathname === item.path ? 'top-menu-item top-menu-item-active' : 'top-menu-item'}>
                                    <div className='top-menu-text'>
                                        {item.text}
                                    </div>
                                    <div className={pathname === item.path ? 'top-menu-line top-menu-line-active' : 'top-menu-line'}>

                                    </div>
                                </div>)
                            }
                        </div>
                    </div>


                    <div>
                        <UserInfo />
                    </div>
                </div>
            </Col>
            <Col span={3}></Col>
        </Row>
    </div>
}

export default PCHeader;